﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" /> 
    <meta name="description" content="jqxMenu allows you to change the popup's open direction by using the setItemOpenDirection method. The 'Services' item is opened above the menu and the 'Contact Us' item is opened below the menu and horizontally aligned to left."/>
    <title id='Description'>jqxMenu allows you to change the popup's open direction by using the setItemOpenDirection method. The 'Services' item is opened above the menu and the
    'Contact Us' item is opened below the menu and horizontally aligned to left.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: '310', height: '30', mode: 'horizontal', showTopLevelArrows: true});
                // Set up the open directions.
                $("#jqxMenu").jqxMenu('setItemOpenDirection', 'Services', 'left', 'up');
                $("#jqxMenu").jqxMenu('setItemOpenDirection', 'ContactUs', 'left', 'down');
                $("#jqxMenu").css('visibility', 'visible');
            });
        </script>
        <div id='jqxWidget' style='margin-top: 100px; width: 310px;'>
            <div id='jqxMenu' style="visibility: hidden;">
                <ul>
                    <li style="width: 80px;"><a href="#">About Us</a>
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                            <li><a href="#">The Team</a>
                                <ul>
                                    <li><a href="#">Brigita</a></li>
                                    <li><a href="#">John</a></li>
                                    <li><a href="#">Michael</a></li>
                                    <li><a href="#">Peter</a></li>
                                    <li><a href="#">Sarah</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </li>
                    <li id='Services'><a href="#">Services</a> 
                        <ul>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Shop Online</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                    </li>
                     <li id='ContactUs'><a href="#">Contact Us</a>
                        <ul>
                            <li><a href="#">Enquiry Form</a></li>
                            <li><a href="#">Map &amp; Driving Directions</a></li>
                            <li><a href="#">Your Feedback</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
